<template>
  <n-upload
      directory-dnd
      :action="url"
      :name="name"
      :headers="{
        Authorization:token,
      }"
      :data="{
      'parentId': parentId,
      'creatorId': userInfo.id,
      'pathName': pathName+'/',
    }"
      :show-file-list="false"
      multiple
      @finish="handleFinish">
    <n-upload-dragger>
      <div>
        <n-icon size="35" :depth="3">
          <icon icon="mdi:upload"></icon>
        </n-icon>
      </div>
      <n-text style="font-size: 16px">
        点击或者拖动文件到该区域来上传
      </n-text>
      <n-p depth="3" style="margin: 1px 0 0 0">
        请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
      </n-p>
    </n-upload-dragger>
  </n-upload>

</template>

<script setup lang="ts">


import {uploadFile} from '~/settings'
import {useFileStore} from "@/store/file";
import {storeToRefs} from "pinia";
import {Icon} from "@iconify/vue";
import {UploadFileInfo} from "naive-ui";
import {useUserStore} from "@/store/user";

const userStore = useUserStore()
const {userInfo, token} = storeToRefs(userStore)
const fileStore = useFileStore()
const {parentId, pathName} = storeToRefs(fileStore)

const url = uploadFile.url
const name = uploadFile.name

const emits = defineEmits(['handleUploadSuccess'])
const handleFinish = ({file, event}: {
  file: UploadFileInfo
  event?: ProgressEvent
}) => {
  const res = JSON.parse((event?.target as XMLHttpRequest).response)
  if (res.code === 0) {
    window.$message.success('上传成功')
    emits('handleUploadSuccess')
  }
  return file
}


</script>

<style scoped>

</style>